<template>
    <div>
        <Content style="width:90%">
          <Form :label-width="140">
              <FormItem label="菜单图标">
                <template>
                  <div class="demo-upload-list" v-for="(item,id) in uploadFiles" :key="id">
                    <template v-if="item.status === 'finished'">
                      <img :src="item.src" alt="img">
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="preview(item.src)" title="预览"></Icon>
                        <Icon type="ios-trash-outline" @click.native="remove(id)" title="删除"></Icon>
                      </div>
                    </template>
                    <template v-else>
                      <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                    </template>
                  </div>
                  <Upload ref="upload_module"
                    :show-upload-list="false"
                    :on-success="onUploadSuccess"
                    :format="['jpg','jpeg','png']"
                    :max-size="4096"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    type="drag"
                    name="binaryFile"
                    :headers="uploadHeader"
                    :data="uploadParam"
                    :action="uploadApi"
                    style="display: inline-block;width:58px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                      <Icon type="ios-camera" size="20"></Icon>
                    </div>
                  </Upload>
                </template>
              </FormItem>
              <FormItem label="模块名称" required>
                <Input v-model="dataForm.moduleName" placeholder="请输入模块名称"></Input>
              </FormItem>
              <FormItem label="商品类型" required>
                <Select v-model="dataForm.goodsType">
                  <Option :value="0" key="0">普通商品</Option>
                  <Option :value="5" key="5">限时团购</Option>
                </Select>
              </FormItem>
              <FormItem label="绑定商品分类">
                <Select placeholder="请选择商品一级分类" clearable v-model="dataForm.categoryId">
                  <Option v-for="item in category" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
              </FormItem>
              <FormItem label="功能路径">
                <Input v-model="dataForm.moduleUrl" placeholder="请输入功能路径"></Input>
              </FormItem>
              <FormItem label="排序" required>
                <InputNumber :min="1" v-model="dataForm.sortIndex" placeholder="请输入排序"></InputNumber>
              </FormItem>
              <FormItem label="启用状态" required>
                <Select v-model="dataForm.moduleStatus">
                  <Option :value="0" key="0">关闭</Option>
                  <Option :value="1" key="1">开启</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="Submit">提交</Button>
              </FormItem>
          </Form>
        </Content>
    </div>
</template>
<script>
export default {
  name: "Update",
  props: {
    callbank: Function
  },
  data() {
    return {
      groupStatus: 1,
      category: [],
      uploadFiles: [],
			categoryArray: [],
      uploadApi: `${env_config.upload_config.api}/agrobiz-file/v1.0/upload/single/file/binary`,
			uploadHeader: {
				'Authorization': 'Bearer ' + this.$store.getToken()
			},
			uploadParam: {
				catalog:'goods'
			},
      dataForm: {}
    }
  },
  methods: {
    Init(data){
      this.$nextTick(()=>{
        this.uploadFiles = this.$refs.upload_module.fileList
      })
      this.dataForm.moduleId = data.moduleId
      this.dataForm.moduleName = data.moduleName
      this.dataForm.goodsType = data.goodsType
      this.dataForm.moduleStatus = data.moduleStatus
      this.dataForm.categoryId = data.categoryId
      this.dataForm.moduleUrl = data.moduleUrl
      this.dataForm.sortIndex = data.sortIndex
      if(data.moduleIcon) this.InitSpuAlbum([{src: data.moduleIcon}])

			new this.$rest({
				service: 'agroerp-shop',
				 gateway: 'agroerp',
				url: '/v1.0/plus/category/lazy',
				query: {
					equal:{
						categoryType: 0
					}
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						this.category = data
					} else {
						this.$Notice.warning({
							title: '商品分类获取失败',
							desc: `失败原因：${res.data.msg}`
						})
					}
				}
			}).get()
		},
    preview(src) {
      this.$Modal.info({
        content: `<img style="width:100%" src="${src}">`,
        width: '500px',
      })
    },
    remove(id) {
      this.uploadFiles.splice(id, 1)
    },
    InitSpuAlbum(fileEntity){
			fileEntity.forEach(element => {
				element.status = 'finished';
				element.percentage = 999;
				element.showProgress = true;
				element.size = 0;
				element.uid = new Date().getTime();
			})
			this.$refs.upload_module.fileList = fileEntity
			this.uploadFiles = this.$refs.upload_module.fileList
		},
    onUploadSuccess(response, file, fileList) {
			if(response.code == 20000){
				fileList.forEach(element => {
					if(!element.src) {
						element.src = element.response.data.protocol + element.response.data.hostName + element.response.data.filePath
					}
				})
			} else {
				this.$Notice.warning({
					title: '上传失败',
					desc: `失败原因：${response.msg}`
				})
			}
			this.uploadFiles = fileList;
		},
    handleFormatError(file) {
			this.$Notice.warning({
				title: '图片格式不支持',
				desc: `${file.name}图片格式不支持，请使用jpg、jpeg、png`
			})
		},
		handleMaxSize(file) {
			this.$Notice.warning({
				title: '图片过大',
				desc: `${file.name}图片大小不能超过2M`
			})
		},
    Submit() {
      this.dataForm.moduleIcon = this.uploadFiles[0].src
      if(!this.dataForm.categoryId) {
        this.dataForm.categoryId = '0'
      }
      console.log(this.dataForm)
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-mall",
        url: "/v1.0/app/module",
        data: {
          pojo: this.dataForm
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: '编辑成功',
            })
            this.callbank()
          } else {
            this.$Message.error({
              content: res.data.msg
            })
          }
        },
      }).put()
    }
  }
}
</script>
<style scoped>
.demo-upload-list {
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #fff;
	position: relative;
	margin-right: 4px;
}

.demo-upload-list img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.demo-upload-list-cover {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
	display: block;
}

.demo-upload-list-cover i {
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	margin: 0 2px;
}

.intro-con {
	min-height: 140px;
}

.draggable-btn {
	margin-top: 20px;
}

.code-con {
	width: 400px;
	background: #F9F9F9;
	padding-top: 10px;
}
</style>